<template>
  <!-- 费用分配 -->
  <view class="costsAssign">
    <div class="relative-wrap">
      <view class="costsAssign-header">
        <div class="title nowrap">{{ CompanyName }}</div>
        <div class="timer nowrap">{{ Year }}年{{ QuarterMap[QuarterId] }}</div>
      </view>
      <div class="costs-assign-header-con">
        <div class="cost-money-count">
          <div class="cost-money-count-item">
            <div class="row-item">
              <div class="u-flex">
                <div class="label-name">费用总金额：</div>
                <div class="price">￥{{ form.TotalCost }}</div>
              </div>
            </div>
            <div class="row-item">
              <div class="u-flex">
                <div class="label-name">已分配金额：</div>
                <div class="price">￥{{ form.ToCost }}</div>
              </div>
            </div>
            <div class="row-item">
              <div class="u-flex">
                <div class="label-name">可分配金额：</div>
                <div class="price">￥{{ form.NoToCost }}</div>
              </div>
            </div>
          </div>
          <!-- <div class="cost-proportion">
              <div>使用比例</div>
              <div class="proportion-count">66.6%</div>
            </div> -->
        </div>
      </div>
    </div>
    <div class="costs-assign-item-con">
      <div class="cost-distribution-title">
        <span class="line"></span>
        费用分配
      </div>
      <div class="category-warp">
        <div class="category-warp-item" v-for="(item, index) in MarketMoney_Set_Detail_List" :key="index">
          <div class="category-warp-item-title">{{ item.Name }}</div>
          <div category-warp-item-con>
            <div class="u-flex u-m-t-20">
              <text class="u-flex-1"></text>
              <!--   <div class="u-flex-2">
                <u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
              </div> -->
              <div class="u-flex-2 u-flex u-row-center" v-if="IsPercentage == 1">
                <u-input
                  type="number"
                  :max="100"
                  :min="0"
                  v-model="item.Percentage"
                  border="border"
                  @input="handleNumberInput($event, item)"
                />
                <text class="u-m-l-10" v-if="IsPercentage == 1">%</text>
              </div>
              <div class="u-flex-2" v-else>
                <u-input type="number" v-model="item.Money" border="border" @input="handleNumberInput($event, item)" />
              </div>
              <text class="u-flex-1"></text>
            </div>
            <hr />
            <div class="cost-money-count-item">
              <div class="row-item">
                <div class="u-flex">
                  <div class="label-name">总金额：</div>
                  <div class="price">{{ getItemMoney(item) }}</div>
                </div>
              </div>
              <div class="row-item">
                <div class="u-flex">
                  <div class="label-name">当前剩余：</div>
                  <div class="price">￥{{ getItemBalance(item) }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="IsPercentage == 1" class="u-flex u-m-t-30" style="margin-bottom: 160rpx;">
        <div class="u-flex-1 u-flex">
          <div>金额：</div>
          <u-input type="number" v-model="changeMoney" border="border" placeholder="请输入金额" />
        </div>
        <div class="u-flex-1 u-m-l-20 u-flex u-row-center" style="text-align: center;">
          <!-- <div>分配比例</div>
          <div class="u-font-40" style="color: #f4860a;font-weight: bold;">70%</div> -->
          <u-button style="width: 100rpx;" size="medium" @tap="handleAddMoney">增加</u-button>
          <u-button style="width: 100rpx" size="medium" @tap="handleReduceMoney">减少</u-button>
        </div>
      </div>
    </div>
    <div class="costs-assign-btn-wrap"><text class="submit" @tap="handleSubmit">提交</text></div>

    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      list: [
        {
          value: '1',
          label: '比例'
        },
        {
          value: '2',
          label: '金额'
        }
      ],

      QuarterMap: {
        1: '第一季度',
        2: '第二季度',
        3: '第三季度',
        4: '第四季度'
      },

      CompanyName: '',
      Year: '',
      QuarterId: '',

      IsPercentage: '',

      MarketMoney_Set_List: [],
      MarketMoney_Set_Detail_List: [],

      changeMoney: '',

      form: {
        SetId: '',
        TotalCost: '',
        ToCost: '',
        NoToCost: '',
        MM_B_List: [
          {
            Id: '',
            TypeId: '',
            Percentage: '',
            Money: ''
          }
        ]
      }
    };
  },

  onLoad(options) {
    if (options.Id) {
      this.form.SetId = options.Id;
    }

    this.getData();
  },

  methods: {
    handleNumberInput(e, item) {
      if (this.IsPercentage == 1) {
        if (Number(e) > 100) {
          item.Percentage = 100;
        }
        if (Number(e) < 0) {
          item.Percentage = 0;
        }

        item.Percentage = Number(e);
      } else {
        item.Money = Number(e);

        let total = 0;
        this.MarketMoney_Set_Detail_List.forEach(d => {
          total += Number(d.Money);
        });

        this.form.ToCost = total;
        this.form.NoToCost = Number(this.form.TotalCost) - total;
      }
    },

    handleAddMoney() {
      if (this.changeMoney) {
        if (Number(this.form.ToCost) + Number(this.changeMoney) > Number(this.form.TotalCost)) {
          this.$u.toast('可分配金额不能大于总金额');
          return false;
        }

        this.form.ToCost = Number(this.form.ToCost) + Number(this.changeMoney);
        this.form.NoToCost = Number(this.form.NoToCost) - Number(this.changeMoney);
      } else {
        this.$u.toast('请输入正确的金额数值');
      }
    },
    handleReduceMoney() {
      if (this.changeMoney) {
        if (Number(this.form.ToCost) - Number(this.changeMoney) < 0) {
          this.$u.toast('已分配金额不能小于0');
          return false;
        }

        this.form.ToCost = Number(this.form.ToCost) - Number(this.changeMoney);
        this.form.NoToCost = Number(this.form.NoToCost) + Number(this.changeMoney);
      } else {
        this.$u.toast('请输入正确的金额数值');
      }
    },

    getItemMoney(item) {
      if (this.IsPercentage == 1) {
        return this.form.ToCost * item.Percentage * 0.01;
      } else {
        return item.Money;
      }
    },

    getItemBalance(item) {
      return this.getItemMoney(item) - item.CheckCost;
    },

    handleSubmit() {
      this.form.MM_B_List = this.MarketMoney_Set_Detail_List.map(item => {
        return {
          Id: item.BId,
          TypeId: item.Id,
          Percentage: item.Percentage,
          Money: this.getItemMoney(item)
        };
      });

      let total_percent = 0;
      let total_money = 0;
      this.form.MM_B_List.forEach(item => {
        total_percent += Number(item.Percentage);
        total_money += Number(item.Money);
      });

      if (this.IsPercentage) {
        if (total_percent > 100) {
          this.$u.toast('所有科目百分比之和不能超过100%');
          return false;
        }
      } else {
        if (total_money > Number(this.form.TotalCost)) {
          this.$u.toast('所有科目总金额之和不能大于费用总金额');
          return false;
        }
      }

      this.$u.api.updateCostsAssign(this.form).then(res => {
        console.log(res);
        const { ResultCode, ResultMessage } = res;

        if (ResultCode == 1) {
          this.$refs.uToast.show({
            title: ResultMessage,
            callback() {
              let pages = getCurrentPages(); // 当前页面
              let beforePage = pages[pages.length - 2]; //

              uni.navigateBack({
                success: function() {
                  if (beforePage) {
                    beforePage.getData(true); // 执行上一页的onLoad方法
                  }
                }
              });
            }
          });
        } else {
          this.$u.toast(ResultMessage);
        }
      });
    },

    getData() {
      this.$u.api
        .loadCostAssignDetail({
          SetId: this.form.SetId
        })
        .then(res => {
          console.log(res);
          const { MarketMoney_Set_Detail_List, MarketMoney_Set_List, ResultCode, ResultMessage } = res;
          if (ResultCode == 1) {
            if (MarketMoney_Set_Detail_List) {
              this.MarketMoney_Set_Detail_List = MarketMoney_Set_Detail_List;
            }
            if (MarketMoney_Set_List) {
              this.MarketMoney_Set_List = MarketMoney_Set_List;

              if (MarketMoney_Set_List.length > 0) {
                this.IsPercentage = MarketMoney_Set_List[0].IsPercentage;
                this.CompanyName = MarketMoney_Set_List[0].CompanyName;
                this.Year = MarketMoney_Set_List[0].Year;
                this.QuarterId = MarketMoney_Set_List[0].QuarterId;

                this.form.ToCost = MarketMoney_Set_List[0].ToCost;
                this.form.TotalCost = MarketMoney_Set_List[0].TotalCost;
                this.form.NoToCost = MarketMoney_Set_List[0].NoToCost;
              }
            }
          }
        });
    }
  }
};
</script>
<style>
page {
  background-color: #edeff2;
}
</style>
<style scoped lang="scss">
.costsAssign {
  margin: 0 20rpx;
  padding-top: 20rpx;
  // background: #ffffff;
  box-shadow: 0px 1px 3px rgba(101, 101, 101, 0.15);
  position: relative;
  height: 100vh;
  border-radius: 8px 8px 0px 0px;
  width: calc(100% -40rpx);
  .relative-wrap {
    position: fixed;
    box-shadow: 0px 1px 3px rgba(101, 101, 101, 0.15);
    z-index: 1000;
    background: #fff;
    width: calc(100% - 40rpx);
    padding-bottom: 20rpx;
    border-radius: 8px;
    .costsAssign-header {
      padding: 20rpx 20rpx;
      width: 100%;
      background: linear-gradient(90deg, #ff7626 -5.75%, #f7b66e 100%);
      border-radius: 8px 8px 0px 0px;
      display: flex;
      align-items: center;
      color: #fff;
      .title {
        flex: 2;
        font-size: 36rpx;
        font-weight: bold;
      }
      .timer {
        flex: 1;
        text-align: right;
        font-size: 28rpx;
      }
    }
    .costs-assign-header-con {
      width: 100%;
      padding-left: 25rpx;
      .cost-money-count {
        display: flex;
        align-items: center;
        .cost-money-count-item {
          flex: 2;
        }
        .cost-proportion {
          flex: 1;
          color: #ff7626;
          text-align: center;
          .proportion-count {
            font-size: 40rpx;
            font-weight: bold;
          }
        }
      }
    }
  }
  .costs-assign-item-con {
    position: fixed;
    background: #fff;
    width: calc(100% - 80rpx);
    height: calc(100vh - 330rpx);
    overflow: auto;
    top: 330rpx;
    z-index: 100;
    font-size: 30rpx;
    padding: 0 20rpx 28rpx 20rpx;
    .cost-distribution-title {
      margin-top: 70rpx;
      display: flex;
      align-items: center;
      flex: 2;
      font-size: 36rpx;
      font-weight: bold;
      .line {
        display: inline-block;
        height: 36rpx;
        width: 6rpx;
        margin-right: 20rpx;
        background: #ff8441;
      }
    }
    .category-warp {
      .category-warp-item {
        margin-top: 30rpx;
        background: #ffffff;
        box-shadow: 0px 1px 3px rgba(247, 181, 109, 0.3);
        border-radius: 8px;
        border-radius: 8px;
        border: 1px solid rgba(247, 181, 109, 0.3);
        .category-warp-item-title {
          color: #ff8441;
          font-size: 32rpx;
          font-weight: bold;
          border-radius: 8px 8px 0px 0px;
          line-height: 80rpx;
          padding: 0 20rpx;
          border-bottom: 1px solid rgba(247, 181, 109, 0.2);
          background: rgba(247, 181, 109, 0.3);
        }
        .cost-money-count-item {
          margin-left: 32rpx;
          padding-bottom: 32rpx;
          .row-item {
            margin-top: 26rpx;
            font-weight: bold;
            .label-name {
              text-align: right;
              font-weight: normal;
            }
          }
        }
      }
    }

    hr {
      margin: 28rpx 30rpx;
      border: 1rpx dashed #b9b9b9;
    }
  }
  .costs-assign-btn-wrap {
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0;
    z-index: 99999;
    background: #fff;
    width: 100%;
    margin-left: -20rpx;
    padding: 10rpx 0;
    justify-content: space-between;
    .withdraw,
    .submit {
      width: 100%;
      text-align: center;
      line-height: 76rpx;
      border-radius: 38rpx;
    }
    .withdraw {
      margin-left: 60rpx;
      color: #ff2723;
      border: 1px solid #ff2723;
    }
    .submit {
      background: #ff7626;
      color: #fff;
      margin: 0 60rpx;
    }
  }
  .row-item {
    display: flex;
    margin-top: 16rpx;
    justify-content: space-between;
    font-weight: bold;
    .label-name {
      color: #979797;
      font-weight: normal;
      width: 200rpx;
    }
  }
  .nowrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
